<template>
  <div>
    <el-button icon="el-icon-back" type="primary" style="float: left;" @click="back" circle></el-button>
    <full-calendar class="test-fc" :events="fcEvents"
                   first-day='1' locale="fr" style="width: 80%; padding-top: 50px">
      <template slot="fc-event-card" slot-scope="p">
      </template>
    </full-calendar>
  </div>
</template>
<script>
import fullCalendar from 'vue-fullcalendar'
import spotApi from '@/api/spot/spot'

export default {
  name: 'schedule',
  data () {
    return {
      spotId: this.$route.params.spotId, // 广告位id,该页面档期是该广告位的档期
      fcEvents: [{ // 在档期显示的已经被预定的广告位信息
        title: this.spotId + '被预订', // 显示在相应时间位置上的信息
        start: '', // 一段预订时间的开始时间
        end: '', // 一段预订时间的开始时间
        cssClass: 'family'// 显示样式
      }]
    }
  },
  /**
   * @description 初始化事件,一开始显示档期信息
   */
  created () {
    this.getDate()
  },
  methods: {
    /**
     * @description 获取广告位预定的时间段数组,显示档期信息
     */
    getDate () {
      this.spotId = this.$route.params.spotId
      spotApi.getDate(this.spotId).then(res => {
        for (let item of res.data) {
          this.fcEvents.push({
            title: '被预订',
            start: item.startDate,
            end: item.endDate,
            cssClass: 'family'
          })
        }
      })
    },
    /**
     * 返回上一页
     */
    back () {
      this.$router.go(-1)
    }
  },
  components: {
    fullCalendar
  }
}
</script>
<style lang='scss'>
  .app {
    color: green;
  }
</style>
